<!DOCTYPE html>
<html lang="en" xmlns:th="http:www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/elementui/index.css">
    <script src="/vue/vue.js"></script>
    <script src="/qs/qs.min.js"></script>
    <script src="/elementui/index.js"></script>
    <script src="/axios/axios.min.js"></script>
</head>
<body>
<div id="app">
    <!--头部-->
    <div>
        <el-button round @click="addDriver" >添加驾驶员</el-button>
        <el-form ref="form" :model="form" label-width="300px" style="float: right;">
            <el-form-item>
                <el-input v-model="form.name" placeholder="请输入物流公司" style="width: 300px;" ></el-input>
                <el-button type="primary" round @click="search" >搜索</el-button>
            </el-form-item>
        </el-form>
    </div>
    <!--中间部分-->
    <el-table :data="drivers" style="width: 100%">
        <el-table-column label="驾驶员编号">
            <template slot-scope="scope">
                <span>{{scope.row.driverId}}</span>
            </template>
        </el-table-column>
        <el-table-column label="驾驶员姓名">
            <template slot-scope="scope">
                <span>{{scope.row.driverName}}</span>
            </template>
        </el-table-column>
        <el-table-column label="驾驶证号">
            <template slot-scope="scope">
                <span>{{scope.row.driverLicense}}</span>
            </template>
        </el-table-column>
        <el-table-column label="身份证号">
            <template slot-scope="scope">
                <span>{{scope.row.idCard}}</span>
            </template>
        </el-table-column>
        <el-table-column label="性别">
            <template slot-scope="scope">
                <span>{{scope.row.driverSex}}</span>
            </template>
        </el-table-column>
        <el-table-column label="联系方式">
            <template slot-scope="scope">
                <span>{{scope.row.driverControl}}</span>
            </template>
        </el-table-column>
        <el-table-column label="所属物流公司">
            <template slot-scope="scope">
                <span>{{scope.row.logistics.logisticsName}}</span>
            </template>
        </el-table-column>
        <el-table-column label="负责车辆">
            <template slot-scope="scope">
                <span>{{scope.row.vehicle.vehicleName}}</span>
            </template>
        </el-table-column>
        <el-table-column label="工龄">
            <template slot-scope="scope">
                <span>{{scope.row.driverAge}}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" circle
                           @click="updateDriver(scope.$index,scope.row)"></el-button>
                <el-button type="danger" icon="el-icon-delete" circle
                           @click="deleteDriver(scope.$index,scope.row)"></el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--分页-->
    <center>
<!--        <el-pagination-->
<!--                background-->
<!--                layout="prev, pager, next"-->
<!--                @current-change="loadPage"-->
<!--                :total="total"-->
<!--                :current-page="current"-->
<!--                :page-size="pageSize">-->
<!--        </el-pagination>-->

        <!--分页查询-->
        <el-pagination    class="pagination"    background
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page="current"
                          :page-sizes="[3,5,8,10]"
                          :page-size="pageSize"
                          layout="total, sizes, prev, pager, next"
                          :total="total">

        </el-pagination>
    </center>

    <!--对话框-->
    <el-dialog title="添加驾驶员" :visible.sync="dialogFormVisible" @close="closeMyDialog">
        <el-form :model="driver">
            <el-form-item label="人员姓名" :label-width="formLabelWidth">
                <el-input v-model="driver.driverName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="身份账号" :label-width="formLabelWidth">
                <el-input v-model="driver.idCard" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="驾驶证号" :label-width="formLabelWidth">
                <el-input v-model="driver.driverLicense" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" :label-width="formLabelWidth">
                <el-input v-model="driver.driverControl" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="物流公司" :label-width="formLabelWidth">
                <el-select v-model="value1">
                    <el-option
                            v-for="logistic in logistics"
                            :label="logistic.logisticsName"
                            :value="logistic.logisticsId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="负责车辆" :label-width="formLabelWidth">
                <el-select v-model="value2">
                    <el-option
                            v-for="vehicle in vehicles"
                            :label="vehicle.vehicleName"
                            :value="vehicle.vehicleId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-select v-model="value">
                    <el-option
                            v-for="item in sex"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="工作年限" :label-width="formLabelWidth">
                <el-input v-model="driver.driverAge" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="driver.text" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveDriver">提交</el-button>
        </div>
    </el-dialog>
</div>

<script>
    new Vue({
        el:'#app',
        // 参数
        data(){
            return{
                drivers:null,   // 表数据
                logistics:null, // 物流公司信息
                vehicles:null,   // 车辆信息
                current:1,      // 当前条数
                total:0,        // 总条数
                pageSize:5,     // 每页条数
                formLabelWidth:'120px',
                value1:'',
                value2:'',
                dialogFormVisible: false,  // 表单的显示
                driver:{
                    driverId:'',
                    driverName:'',
                    idCard:'',
                    driverLicense:'',
                    driverControl:'',
                    logisticsId:'',
                    vehicleId:'',
                    driverSex:'',
                    driverAge:'',
                    text:''
                },
                sex:[{
                    value:'男',
                    label:'男'
                },{
                    value:'女',
                    label:'女'
                }],
                value:'',
                form:{
                    name:''
                }
            }
        },

        // 挂载
        mounted(){
            this.search();
        },

        // 方法区
        methods:{
            // 分页查询
            loadPage(current){
                this.current = current;
                axios.get("/pageDrivers?current="+current).then(value => {
                    if (value.data.state == 1){
                        this.drivers = value.data.data.records;
                        this.total = value.data.data.total;
                        this.pageSize = value.data.data.size;
                        this.current = value.data.data.current;
                    }
                })
            },

            // 关闭对话框。清空内容
            closeMyDialog(){
                this.driver = {
                    driverId:'',
                    driverName:'',
                    idCard:'',
                    driverLicense:'',
                    driverControl:'',
                    logisticsId:'',
                    vehicleId:'',
                    driverSex:'',
                    driverAge:'',
                    text:''
                }
                this.value1='';
                this.value2='';
                this.value='';
            },

            // 添加驾驶员
            addDriver(){
                this.dialogFormVisible = true;
                // 获取所有的物流公司
                axios.get("/logistics").then(value => {
                    if (value.data.state == 1){
                        this.logistics = value.data.data;
                    }
                });
                // 获取所有的负责车辆
                axios.get("/vehicles").then(value => {
                    if (value.data.state == 1){
                        this.vehicles = value.data.data;
                    }
                });
            },

            // 保存驾驶员
            saveDriver(){
                this.driver.logisticsId = this.value1;
                this.driver.vehicleId = this.value2;
                this.driver.driverSex = this.value;
                if (this.driver.driverId == ""){
                    axios.post("/drivers",this.driver).then(value =>{
                        if (value.data.state == 1){
                            this.$message("驾驶员添加成功！");
                            this.dialogFormVisible = false;
                            this.loadPage(1);
                        }
                    });
                }else {
                    axios.put("/drivers",this.driver).then(value =>{
                        if (value.data.state == 1){
                        this.$message("驾驶员修改成功！");
                        this.dialogFormVisible = false;
                        this.loadPage(1);
                    }
                });
                }

            },

            //删除驾驶员
            deleteDriver(index,row){
                this.driver = row;
                this.$confirm("确定删除驾驶员"+this.driver.driverName+"吗？","提示",{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(()=>{
                    axios.delete("/driver/"+row.driverId).then(value => {
                        if (value.data.state == 1){
                            this.$message("删除成功！")
                            this.loadPage(1);
                        }
                    });
                });
            },

            // 修改驾驶员
            updateDriver(index,row){
                this.driver = row;
                this.value = row.driverSex;
                this.value1 = row.logistics.logisticsId;
                this.value2 = row.vehicle.vehicleId;
                this.dialogFormVisible = true;
                axios.get("/logistics").then(value => {
                    if (value.data.state == 1){
                        this.logistics = value.data.data;
                    }
                });
                axios.get("/vehicles").then(value => {
                    if (value.data.state == 1){
                        this.vehicles = value.data.data;
                    }
                });
            },

            // 搜索
            search(){
                if (this.form.name.length > 0){
                    axios.post("/searchDrivers/"+this.form.name+"/"+this.current).then(value => {
                        if (value.data.state == 1){
                            this.drivers = value.data.data.records;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.current = value.data.data.current;
                        }
                    });
                }else {
                    axios.get("/selectDrivers/"+this.pageSize+"?current="+this.current).then(value => {
                        if (value.data.state == 1){
                            this.drivers = value.data.data.records;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.current = value.data.data.current;
                        }
                    });
                }
            },

            // 按1,2,3···查
            handleCurrentChange(page){
                this.current = page;
                if (this.form.name.length > 0){
                    axios.get("/selectDrivers/"+this.pageSize+"/"+this.form.name+"?current=" + this.current).then(value => {
                        if (value.data.state == 1) {
                            this.drivers = value.data.data.records;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.current = value.data.data.current;
                        }
                    });
                }else{
                    axios.get("/selectDrivers/"+this.pageSize+"?current="+this.current).then(value => {
                        if (value.data.state == 1){
                            this.drivers = value.data.data.records;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.current = value.data.data.current;
                        }
                    });
                }

            },

            // 按3,5,8···查
            handleSizeChange(size){
                this.pageSize = size;
                if (this.form.name.length > 0){
                    axios.get("/selectDrivers/"+this.pageSize+"/"+this.form.name+"?current=" + this.current).then(value => {
                        if (value.data.state == 1) {
                            this.drivers = value.data.data.records;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.current = value.data.data.current;
                        }
                    })
                }else{
                    axios.get("/selectDrivers/"+this.pageSize+"?current="+this.current).then(value => {
                        if (value.data.state == 1){
                            this.drivers = value.data.data.records;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.current = value.data.data.current;
                        }
                    });
                }
            },
        }
    })
</script>
</body>
</html>